<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>足下教育</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/layui.css"/>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		body{
			height: 100%;
		}
			.chat-box {
					/* padding: 10px 0px; */
					position: fixed;
					z-index: 100;
					/* padding: 0px 20px; */
					bottom: 0px;
					left: 0px;
					background-color: rgb(248, 248, 248);
					width: 100%;
					height: 100%;
					/* display: none; */
					-webkit-overflow-scrolling: touch; /* 可以让页面在Native端滚动时模拟原生的弹性滚动效果  */
			}

			.chat-list {
					height: 90%;
					padding-top: 0.625rem;
					overflow: auto;
					border-bottom: 1px solid #f0f0f0;
			}

			.inputdiv {
					display: flex;
					justify-content: space-between;
					height: 10%;
			}

			.chat-input .inputdiv input[type='text'] {
					width: 90%;
					border: none;
			}

			.chat-box .close {
					position: absolute;
					right: 0px;
					top: 0px;
					color: orangered;
			}

			.chat-box .seller {
					display: flex;
					justify-content: flex-start;
					position: relative;
					margin-left: 10px;
			}

			.chat-list .sys {
					text-align: center;
					color: #111111;
			}

			.chat-box .time{
					text-align: center;
					font-size: 12px;
			}

			.chat-list .sys {
					text-align: center;
					color: #111111;
			}
			.chat-box .seller-conent::before {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					top: 50%;
					left: -10px;
					margin-top: -10px;
					border-top: 5px solid transparent;
					border-right: 10px solid #3a8ee6;
					border-bottom: 5px solid transparent;
			}
			 .chat-box .me {
			            display: flex;
			            justify-content: flex-end;
			            position: relative;
			            margin-right: 10px;
			        }
			
			
			        .chat-box .me-content::after {
			            content: '';
			            width: 0;
			            height: 0;
			            position: absolute;
			            top: 50%;
			            right: -10px;
			            margin-top: -10px;
			            border-top: 5px solid transparent;
			            border-left: 10px solid white;
			            border-bottom: 5px solid transparent;
			        }
			
			        .chat-box .me-content {
			            max-width: 90%;
			            padding: 10px;
			            display: inline-block;
			            background-color: white;
			            border-radius: 5px;
			            text-align: left;
			            margin-bottom: 10px;
			        }
							
			        .chat-box .seller-conent {
			            max-width: 90%;
			            padding: 10px;
			            display: inline-block;
			            background-color: #3a8ee6;
			            border-radius: 5px;
			            margin-bottom: 10px;
			        }
							.chat-box .sys-info{
								text-align: center;
								color: #ccc;
							}
		</style>
	</head>
	<body>
		<div class="chat-box">
		    <div class="chat-list">
					<!-- <div class="sys"><div class="sys-content">系统消息：hello</div></div>
					<div class="me"><div class="me-content">有人吗</div></div>
					<div class="seller"><div class="seller-conent">在的，你说</div></div>
					<div class="me"><div class="me-content">有人吗</div></div>
					<div class="seller"><div class="seller-conent">在的，你说</div></div> -->
		    </div>
		    <div class="chat-input">
		        <div class="inputdiv" id="chat1">
		            <input type="text" placeholder="请输入咨询内容" style="padding-left: 0.375rem;" id="inputText1">
		            <input type="button" value="发送" class="layui-btn layui-btn-normal" onclick="send()">
		        </div>
		    </div>
		    <div class="close">
		        <i class="glyphicon glyphicon-remove-sign"></i>
		    </div>
		</div>
	</body>
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var websocket = null;
		var randId,randName,kefu,laoshi;
		conectWebSocket();
		function conectWebSocket(){
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket'in window) {
					// ws://127.0.0.1:18080/testWebsocket/23/Lebron
					if(localStorage.getItem("youke")==null)		// 为空,第一次访问
					{
						 randId = Math.round(Math.random()*10000);	//生成随机数
							randId = "youke"+randId;
						 randName = "咨询人"+randId	;		
						 localStorage.setItem("youke",randId);
					}else{				// 多次访问
						randId = localStorage.getItem("youke");
						randName= "咨询人"+randId	;	
					}
					websocket = new WebSocket(`ws:${WSHOST}`  + "/websocket/" + randId + "/user1" + "/" +randName);
					// websocket = new WebSocket("ws://127.0.0.1:8082/websocket/23/Lebron");
			} else {
					layer.msg('您的浏览器不支持在线咨询')
			}
			//连接发生错误的回调方法
			websocket.onerror = function() {
					setMessageInnerHTML("error");
			};
			//连接成功建立的回调方法
			websocket.onopen = function(event) {
					// addSysInfo("链接成功");
			}
			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				let obj = JSON.parse(event.data);
				console.log(obj);
				if(obj.type==1){
					addSysInfo("链接成功");
					if(obj.from){
						kefu = obj.from;
						getLaoshiInfo(kefu);
					}
				} else if(obj.type==3){
					layer.msg("没有客服在线");
					window.setTimeout(function(){
						location.replace('./leavemsg.html')
					},1000)
				} else if(obj.type==4){
					let s = `<div class="sys-info">${laoshi}已离开</div>`;
					$(".chat-list")	.append(s);
				}else if(obj.direction==1){
					addInfoFromKefu(obj.msg);
				}
			}
			//连接关闭的回调方法
			websocket.onclose = function() {
					layer.msg("链接已关闭");
			}
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
					websocket.close();
			}
		}
		//将消息显示在网页上
		function setMessageInnerHTML(innerHTML) {
			document.getElementById('message').innerHTML += innerHTML + '<br/>';
		}
		// 显示系统消息
		function addSysInfo (msg) {
			layer.msg(msg);
		}
		// 显示客服的回话
		function addInfoFromKefu (info) {
			let s=`${laoshi}<div class="seller"><div class="seller-conent">${info}</div>`;
			$(".chat-list").append(s);
			$(".chat-list").scrollTop($(".chat-box").scrollHeight);	// 滚动到底部
		}
		//关闭连接
		function closeWebSocket() {
			websocket.close();
		}
		//发送消息
		function send() {
			var message = document.getElementById('inputText1').value;
			let s = `<div class="me"><div class="me-content">${message}</div></div>`;
		
			var data = {"direction": 2, "from": randId, "to": kefu, "msg": message};
			websocket.send(JSON.stringify(data));
			$("#inputText1").val("");
			$(".chat-list")	.append(s);
		}
		function getLaoshiInfo (id) {
			$.ajax({
				url:`${HOST}/h5/getLaoshi`,
				data:{"id":id},
				success:function(res){
					laoshi = res.data.jdname;
					let s = `<div class="sys-info">${laoshi}在线</div>`;
					$(".chat-list")	.append(s);
				}
			})
		}
	</script>
</html>
